<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>植物图鉴</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/botany.css">
    <script src="./js/vue.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/axios.js"></script>

</head>

<body>
    <div id="app" style="width: 80%;margin-left: 10%;">
        <el-container>
            <!-- 头部 -->
            <el-header>
                <div class="line"></div>
                <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-menu-item index="1" style="margin-left: 20px;float:right">登录</el-menu-item>
                    <el-menu-item index="2" style="margin-left: 20px;float:right">注册</el-menu-item>
                </el-menu>
            </el-header>
            <!-- 海报 -->
            <el-main>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <div class="poster"></div>
                        </div>
                    </el-col>
                </el-row>
            </el-main>
            <el-row>
                <el-col :span="24">
                    <!-- 菜单栏 -->
                    <el-header class="nav">
                        <div class="line"></div>
                        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                            <el-menu-item index="1" style="margin-right: 8%;">植物图鉴</el-menu-item>
                            <el-menu-item index="2" style="margin-right: 8%;">僵尸图片</el-menu-item>
                            <el-menu-item index="3" style="margin-right: 8%;"><a href="https://www.ele.me" target="_blank">游戏攻略</a></el-menu-item>
                            <el-menu-item index="4" style="margin-right: 8%;">游戏介绍</el-menu-item>
                            <el-menu-item index="4" style="margin-right: 8%;">衍生周边</el-menu-item>
                            <el-menu-item index="6" style="margin-right: 8%;">搜索</el-menu-item>

                        </el-menu>

                    </el-header>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="16">
                    <!-- 筛选菜单 -->
                    <el-header class="meau">
                        <el-row>
                            <el-button type="success" plain @click="show_td(1)">白天植物</el-button>
                            <el-button type="success" plain @click="show_td(2)">黑夜植物</el-button>
                            <el-button type="success" plain @click="show_td(3)">雾天植物</el-button>
                            <el-button type="success" plain @click="show_td(4)">泳池植物</el-button>
                            <el-button type="success" plain @click="show_td(5)">屋顶植物</el-button>
                            <el-button type="success" plain @click="show_td(6)">商店植物</el-button>
                            <table cellpadding="0" cellspacing="0" style="margin-left: 15%;">
                                <tr>
                                    <th>
                                        <!-- <el-button type="primary" plain>白天植物</el-button> -->
                                    </th>
                                    <td v-for="d in filterButtons">
                                        <el-button type="info" round>{{d.name}}</el-button>
                                    </td>
                                </tr>
                            </table>
                        </el-row>


                    </el-header>
                </el-col>
                <el-col :span="8">
                    <!-- 介绍 -->

                    <div class="introduce">
                        本百科正在建设中，你可以加入我们，与我们一同收集植物大战僵尸的方方面面，共同完善本百科！
                    </div>

                </el-col>
            </el-row>
            <!-- 图鉴 -->
            <el-header class="atlas" style="margin-left: 10%;">
                <img :src="tj" alt="">
                <div style="text-indent: 2em; text-align: left;">{{data_list}}</div>
            </el-header>
            <el-row>
                <el-col :span="16">
                    <!-- 内容区 -->
                    <el-main class="content">
                        <!-- 属性简介展示 -->
                        <el-row :gutter="1">
                            <!-- 第一行 -->
                            <el-col :span="4">
                                <div class="grid-content bg-purple show-profile">图片</div>
                            </el-col>
                            <el-col :span="4">
                                <div class="grid-content bg-purple show-profile">阳光</div>
                            </el-col>
                            <el-col :span="4">
                                <div class="grid-content bg-purple show-profile">冷缩</div>
                            </el-col>
                            <el-col :span="4">
                                <div class="grid-content bg-purple show-profile">攻击</div>
                            </el-col>
                            <el-col :span="4">
                                <div class="grid-content bg-purple show-profile">血量</div>
                            </el-col>
                            <el-col :span="4">
                                <div class="grid-content bg-purple show-profile">类别</div>
                            </el-col>

                            <!-- 第二行 -->
                            <div id="plants" v-for="plant in filterPlants">
                                <el-col :span="4">
                                    <div class="grid-content bg-purple show-profile2">
                                        <div>
                                            <img class="img-container" :src='"http://localhost:8080/plant/img/"+plant.pid' alt="" @click="test(plant.pid)">
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="grid-content bg-purple show-profile2">{{plant.suns}}</div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="grid-content bg-purple show-profile2">{{plant.cd}}</div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="grid-content bg-purple show-profile2">{{plant.atk}}</div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="grid-content bg-purple show-profile2">{{plant.hp}}</div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="grid-content bg-purple show-profile2">{{plant.env}}</div>
                                </el-col>

                            </div>


                    </el-main>
                </el-col>

                <el-col :span="8">
                    <!-- 热门帖子 -->

                    <div popula-posts style="margin-left: 60%;">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>热门论坛</span>
                                <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
                            </div>
                            <div>
                                热点一&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...<br> 热点二&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
                                <br> 热点二&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...
                                <br>
                            </div>
                        </el-card>
                    </div>
                </el-col>
                </el-row>



        </el-container>



    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            show6: true,
            value: true,
            textarea1: '',
            textarea2: '',
            activeIndex: '1',
            activeIndex2: '1',
            filterButtons: [],
            filterPlants: [],
            plants: [],
            env: null,
            tj: null,
            data_list: null,

        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            show_td(id) {
                var res;
                switch (id) {
                    case 1:
                        res = this.plants.filter(({
                            env
                        }) => {
                            return env == 'day';
                        })

                        break;
                    case 2:
                        res = this.plants.filter(({
                            env
                        }) => {
                            return env == 'night';
                        })
                        break;
                    case 3:
                        res = this.plants.filter(({
                            env
                        }) => {
                            return env == 'fog';
                        })

                        break;
                    case 4:
                        res = this.plants.filter(({
                            env
                        }) => {
                            return env == 'pool';
                        })

                        break;
                    case 5:
                        res = this.plants.filter(({
                            env
                        }) => {
                            return env == 'roof';
                        })

                        break;
                    case 6:
                        res = this.plants.filter(({
                            env
                        }) => {
                            return env == 'shop';
                        })
                        break;
                }
                this.filterPlants = res;
                this.filterButtons = res;
            },
            test(id) {
                this.tj = "http://localhost:8080/plant/img/" + id;
                switch (id) {
                    case 1:
                        this.data_list =
                            "豌豆射手是你的第一道防线，他们能向来犯的僵尸发射豌豆。伤害：中一株植物，怎么能如此快地生长并发射这么多豌豆呢？豌豆射手说：'努力工作，奉献自我，再加上一份阳光和高纤维二氧化碳均衡搭配的早餐。这些让一切成为可能。'花费: 100恢复时间：快"
                        break;
                    case 2:
                        this.data_list =
                            "向日葵对你生产额外阳光至关重要，试着尽可能多种植吧！阳光产量：中向日葵情不自禁和着节拍起舞。是什么节拍呢？是来源于大地，能赋予生机的爵士节拍。这种频率的节拍，只有向日葵才能听到。花费: 50恢复时间：快"
                        break;
                    case 3:
                        this.data_list =
                            "樱桃炸弹会炸掉范围内所有僵尸。他们的引信很短，所以要种在僵尸附近。伤害：极高范围：中等面积内所有僵尸用法：单次使用，立即生效“我要爆开了，”樱桃一号说。“不，我们是要炸开了！”他弟弟樱桃二号说。经过激烈磋商之后，他们才统一达成爆炸这个说法。 花费: 150恢复时间：非常慢"
                        break;
                    case 4:
                        this.data_list =
                            "坚果墙拥有坚硬外壳，可以让你保护其他植物。强度：坚韧“人们想知道，经常被僵尸啃感觉怎样，”坚果墙说，“他们不明白，我有限的感觉只能让我感到麻麻的，就像是在放松地搓背。”花费: 50 恢复时间：慢"
                        break;
                    case 5:
                        this.data_list =
                            "土豆地雷蕴含着巨大威力，但是他们需要些时间做准备。你应该把他们种在僵尸前进的道路上。他们会在接触后爆炸。伤害：极高范围：小面积内所有僵尸用法：单次使用，延迟激活有些人说土豆地雷懒，因为他总是把所有事情留到最后再做。土豆地雷才没空理他们，他正忙着考虑他的投资战略呢。花费: 25恢复时间：慢"
                        break;
                    case 6:
                        this.data_list =
                            "雪花豌豆能发射冻豌豆，冻豌豆会造成伤害并减速僵尸。伤害：中，减速僵尸人们经常告诉雪花豌豆他有多“冷艳”，或者告诫他要“冷静”，他们教他要“冷淡下去”。雪花豌豆衹是翻翻白眼，他都听见了。花费: 175恢复时间：快"
                        break;
                    case 7:
                        this.data_list =
                            "大嘴花可以吞下整只僵尸，但是咀嚼时易受伤害。伤害：极高范围：很近特殊：吞噬间隔很长大嘴花差点就能当《恐怖小店》的特技替身了，却因为他的经纪人在初期要求太高而失败。尽管如此，大嘴花并不愤怒，他说这衹是商业的一部分。花费: 150恢复时间：快"
                        break;
                    case 8:
                        this.data_list =
                            "连发豌豆一次能发射两颗豌豆。伤害：中（每颗豌豆）射速：双倍连发豌豆很凶悍，他是在街头混大的。他不在乎任何人、植物、僵尸的看法，他发射豌豆是为了让别人离他远点。但其实连发豌豆暗暗渴望着爱。花费: 200恢复时间：快"
                        break;
                    case 9:
                        this.data_list =
                            "喷射蘑菇很便宜，但射程很短。伤害：中射程：短白天睡觉“我最近才意识到僵尸的存在，”喷菇说，“和很多真菌一样，我只是把他们想像成童话或电影里的怪物。这次的经历让我大开眼界。”花费: 0恢复时间：快"
                        break;
                    case 10:
                        this.data_list = "阳光蘑菇起初提供少量阳光，一段时间后提供正常量阳光。阳光产量：低，而后中白天睡觉阳光蘑菇讨厌阳光，讨厌到当他内部积累著阳光时，就尽快吐出来。他就是不能忍受这个。对他来说，阳光愚昧而冷酷。花费: 25恢复时间：快"
                        break;
                    case 11:
                        this.data_list = "烟雾蘑菇能喷射可以穿透纱门的烟雾。伤害：中范围：雾气中的所有僵尸特殊：烟雾可以穿透纱门白天睡觉“我以前那份没前途的工作是为一家面包店生产酵母孢，”烟雾蘑菇说，“然后喷射蘑菇——神保佑他——告诉了我这个喷杀僵尸的好机会。现在我真的觉得自己有所作为。”花费: 75恢复时间：快"
                        break;
                    case 12:
                        this.data_list = "把墓碑破坏者种在墓碑上除掉墓碑。用法：单次使用，必须种在墓碑上特殊：除掉墓尽管墓碑破坏者的外表十分吓人，他仍然想要所有人都知道：他喜欢小猫，还利用业余时间在本地一家僵尸康复中心做志愿工作。“我衹是在做正确的事情，”他说。花费: 75恢复时间：快"
                        break;
                    case 13:
                        this.data_list = "催眠蘑菇会让吃下他的僵尸转头为你而战。用法：单次使用，接触生效特殊：使一只僵尸为你作战白天睡觉“僵尸是我们的朋友，”催眠蘑菇断言，“他们遭到了严重误解，这些生物在我们的生态里发挥着宝贵作用。我们可以也应该更努力地让他们适应我们的思考方式。”花费: 75恢复时间：慢"
                        break;
                    case 14:
                        this.data_list = "胆小蘑菇是远程射手，有僵尸靠近时会躲起来。伤害：中特殊：僵尸在附近时停止射击白天睡觉“谁在那？”胆小蘑菇小声说，声音几乎听不见，“走开。我不想见任何人。除非你是马戏团的人。” 花费: 25恢复时间：快"
                        break;
                    case 15:
                        this.data_list = "冰蘑菇会暂时使所有僵尸无法行动。伤害：极低，固定僵尸范围：屏幕上的所有僵尸用法：单次使用，立即生效白天睡觉冰蘑菇皱着眉头，不是因为他不高兴或不满，而是因为童年时受到的创伤导致他面部神经瘫痪。花费: 75恢复时间：非常慢"
                        break;
                    case 16:
                        this.data_list = "毁灭蘑菇会造成大规模破坏并留下无法种植的弹坑。伤害：极高范围：巨大面积内所有僵尸用法：单次使用，立即生效特殊：留下弹坑白天睡觉“你很幸运，我站在你这边，”毁灭蘑菇说，“我能摧毁你珍视的一切，小菜一碟。”花费: 125恢复时间：非常慢"
                        break;
                    case 17:
                        this.data_list = "海蘑菇是水生植物，能发射短程孢子。伤害：中射程：短必须种在水中白天睡觉海蘑菇从未见过大海。虽然他名中有海，也听说过很多关于海的事情，但是从没有找到合适的时间。然而，总有一天，他会亲眼遥望大海的。花费: 0恢复时间：慢"
                        break;
                    case 18:
                        this.data_list = "植物灯可以照亮一片区域，使你能看穿浓雾。范围：一条路特殊：使你能看穿浓雾植物灯违抗科学，他就是做到了。其他植物吃的是光，排出的是氧气；植物灯吃的是黑暗，排出的是光。对于他是如何做到的，植物灯讳莫如深。“我不会说这是巫术，我也不会用黑暗力量这个词，我只是……我想我说得够多了。”花费: 25恢复时间：慢"
                        break;
                    case 19:
                        this.data_list = "仙人掌能发射刺，可以打击地面和空中目标。伤害：中范围：地面和空中确实，仙人掌非常“刺”，但是仙人掌的刺遮掩著一颗温柔的心，充满着爱与善意。他衹是想与别人拥抱。虽然绝大多数人都受不了，但仙人掌并不介意。他注视着一只犰狳很久了，这次好像真的能成了。花费: 125恢复时间：快"
                        break;
                    case 20:
                        this.data_list = "三叶草会吹走所有气球僵尸和浓雾。用法：单次使用，立即生效特殊：吹走所有气球僵尸在三叶草五岁生日的时候，他得到了闪亮的生日蛋糕。他许下愿望，然后深呼吸，但衹吹灭了六成的蜡烛。然而他没有放弃，从那时起，起初的失败促使他更加努力。花费: 100恢复时间：快"
                        break;
                    case 21:
                        this.data_list = "分裂豌豆能向前后双向发射豌豆。伤害：中范围：前面和后面射速：前面正常，后面双倍“没错，我是双子座，”分裂豌豆说，“我知道这的确匪夷所思。不过，长了两颗头——或者实际上，一颗头和一个长在后面的、像头一样的东西——在我履行职责时很奏效。”花费: 125恢复时间：快"
                        break;
                    case 22:
                        this.data_list = "杨桃能向五个方向发射星星。伤害：中（每颗星星）范围：五个方向“啊，哥们，”杨桃说，“有一天我去看牙医，他说我有四个牙洞。我一数，我就只有一颗牙！一颗牙长了四个牙洞？怎么会这样啊？”花费: 125恢复时间：快"
                        break;
                    case 23:
                        this.data_list = "南瓜可以保护在他外壳里面的植物。强度：高特殊：可以种在另一株植物南瓜有一段时间没有收到他表哥“伦菲尔德”的消息了。伦菲尔德是个大明星，是一种……叫什么运动来着……的体育明星？幻幻球大师？南瓜真的没有搞懂。他只是在做自己的本职工作花费: 125恢复时间：慢"
                        break;
                    case 24:
                        this.data_list = "阳光花费 100恢复时间快范围不远的僵尸特殊从僵尸身上移除金属物品白天睡觉"
                        break;
                    case 25:
                        this.data_list = "睡莲叶可以让你在他上面种植非水生植物特殊：非水生植物可以种在上面必须种在水睡莲叶从不抱怨，也从来不想弄明白发生了什么。在他身上种植物，他也不会说什么。难道他有什么惊人的想法或糟糕的秘密？无人知晓。睡莲叶把这些都埋藏在心底花费: 25恢复时间：快"
                        break;
                    case 26:
                        this.data_list = "倭瓜会压扁第一只接近他的僵尸伤害：极高范围：近距离，所有压到的僵尸用法：单次使“我准备好了！”倭瓜大喊，“干吧！算我一个！没人比我更厉害！我就是你要的人！来啊！还等什么？我要的就是这个！花费: 50恢复时间：慢"
                        break;
                    case 27:
                        this.data_list = "三线豌豆能在三条路上发射豌豆伤害：中（每颗豌豆）范围：三条三线豌豆喜欢读书、下双陆棋、在公园里傻坐着。他也喜欢去看演出，特别是现代爵士乐。“眼下我在寻找那位特别的人，”他说。三线豌豆最喜欢的数字是五花费: 325恢复时间：快"
                        break;
                    case 28:
                        this.data_list = "缠绕海带是水生植物，可以将临近他的僵尸拉入水中。伤害：极高用法：单次使用，接触生效必须种在水中“我完全隐形著，”缠绕海带暗想，“我就藏匿在水面下，没人能看见我。”他的朋友告诉他，他们可以清清楚楚地看见他，但是缠绕海带不会改变自己的想法。    花费: 25    恢复时间：慢"
                        break;
                    case 29:
                        this.data_list = "火爆辣椒会消灭整条路上的僵尸。用法：单次使用，立即生效“嗯嗯嗯嗯嗯嗯！！！！！！！！”火爆辣椒说。他还不会爆炸，还不是时候。不过快了。噢，快了快了，快来了。他知道，他感受到了。他的一生都是为了这一刻花费: 125恢复时间：非常慢"
                        break;
                    case 30:
                        this.data_list = "阳光花费所有踏在上面的僵尸特殊不会被僵尸吃掉"
                        break;
                    case 31:
                        this.data_list = "火炬木能把经过他的豌豆变成火球，火球会造成双倍伤害。 特殊：让经过他的豌豆造成双倍伤害，火球会对附近僵尸造成溅射伤害 每个人都喜欢并尊敬火炬木，他们喜欢他的诚实正直、他坚定的友情、以及他大大增强豌豆伤害的能力。但他也有个不能说的秘密——他不识字。 花费: 175 恢复时间：快"
                        break;
                    case 32:
                        this.data_list = "高坚果是坚实的壁垒植物，无法跳过。强度：极其坚韧特殊：无法跳过或越过人们想知道，坚果墙和高坚果之间是否存在竞争。高坚果用低沉的男中音大笑。“我们之间怎么会存在竞争呢？我们是兄弟。如果你知道坚果墙为我做了什么的话……”高坚果的声音越来越小，心知肚明地笑了笑。花费: 125恢复时间：慢"
                        break;
                    case 33:
                        this.data_list = "卷心菜投手能向僵尸投掷卷心菜。 伤害：中 范围：投掷 卷心菜投手用卷心菜砸僵尸有一手，毕竟这是他赚钱的方式，而且他也擅长这个。他只是不明白僵尸一开始是怎么到屋顶上来的。 花费: 100 恢复时间：快"
                        break;
                    case 34:
                        this.data_list = "花盆可以让你在屋顶上种植物。特殊：让你能在屋顶上种植物“我是个种植物用的花盆，但我也是株植物。是不是很意外？” 花费: 25恢复时间：快"
                        break;
                    case 35:
                        this.data_list = "玉米投手能向僵尸投掷玉米粒和黄油。伤害：低（玉米粒），中（黄油）范围：投掷特殊：黄油会固定僵尸玉米投手是投手兄弟的老大。他们三兄弟当中，衹有玉米始终记得其他兄弟的生日，为此他也略微有点烦他们。花费: 100恢复时间：快"
                        break;
                    case 36:
                        this.data_list = "用咖啡豆来唤醒睡觉的蘑菇。用法：单次使用，立即生效特殊：可以种在另一株植物上，唤醒蘑菇“嘿，大伙，嘿！”咖啡豆说，“嘿！怎么回事？那是谁？嘿！你瞧见那玩意没？什么东西？哇！是狮子！”没错，咖啡豆绝对兴奋起来了。 花费: 75 恢复时间：快"
                        break;
                    case 37:
                        this.data_list = "大蒜可以使僵尸转道邻路。用法：接触特殊：使僵尸转道邻路路线转向不仅是大蒜的专业，更是他的热情所在。他拥有布鲁塞尔大学的重定向博士学位，能把路线向量和击退阵列谈上一整天。他甚至会把家里的东西搬到大街上去。不知道他老婆为什么受得了这些。花费: 50恢复时间：快"
                        break;
                    case 38:
                        this.data_list = "叶子保护伞可以保护附近植物免受蹦极僵尸和投石车僵尸袭击。特殊：保护附近植物免受蹦极僵尸和投石车僵尸袭击“砰！”叶子保护伞说，“你喜欢这样不，我还可以再来。砰！哇！那是我在快速弹出叶子来保护我周围的东西。对，就像这样，绝对就像这样。相信他。”花费: 100恢复时间：快"
                        break;
                    case 39:
                        this.data_list = "金盏花可以为你提供金币和银币。特殊：提供硬金盏花花费了许多时间来决定是吐出金币还是银币。他思考着，斟酌观点。他做了扎实的研究，熟悉最新的出版物。这就是成功者保持领先地位的方法花费: 50恢复时间：慢"
                        break;
                    case 40:
                        this.data_list = "西瓜投手能对成群僵尸造成大量伤害。伤害：范围：投特殊：西瓜会对附近僵尸造成溅射西瓜投手身上没有虚伪的谦虚。“阳光——赐予我——力量！我可是这草坪上最能打的，”他说，“我不是自吹自擂，瞧瞧那些统计数据，你会明白的。花费: 300恢复时间：快"
                        break;
                    case 41:
                        this.data_list = "机枪豌豆一次能发射四颗豌豆。伤害：中（每颗豌豆射速：四必须种在连发豌当机枪豌豆宣布他要参军的时候，他的父母很担心。“可是亲爱的，这太危险了！”他们异口同声地说。机枪豌豆拒绝改变想法。“生活本就危险，”他这样回答，眼中流露出钢铁般的信念花费: 250恢复时间：非常慢"
                        break;
                    case 42:
                        this.data_list = "双子向日葵可以提供两倍于普通向日葵的阳光。阳光产量：双必须种在向日那是个疯狂的夜晚，禁忌科学让双子向日葵诞生。电闪雷鸣，狂风怒号，整个世界都愤怒地否定着。但是这一切都无济于事，双子向日葵仍然活着，活花费: 15恢复时间：非常慢"
                        break;
                    case 43:
                        this.data_list = "忧郁蘑菇能围绕自身释放大量烟雾。必须种在烟雾蘑菇上“我一直享受于释放大量烟雾，”忧郁蘑菇说，“我知道很多人受不了这样，他们说这样很粗鲁或者这闻起来很糟糕。我只能说，你们更想被僵尸吃掉脑子吗？”花费: 150恢复时间：非常慢"
                        break;
                    case 44:
                        this.data_list = "香蒲能攻击任一条路并击落气球僵尸。必须种在睡莲叶上“汪！”香蒲说，“汪汪汪！你困惑了？你是不是因为我看起来像只猫，就期待我像猫一样喵喵叫？这里可不是那样，我拒绝被草率归类。”花费: 225恢复时间：非常慢"
                        break;
                    case 45:
                        this.data_list = "“冬”瓜能对成群僵尸造成大量伤害并减速他们。伤害：高范围：投掷特殊：西瓜会对附近僵尸造成溅射伤害并减速他们必须种在西瓜投手上“冬”瓜试着让自己紧绷的神经冷静下来，他听到僵尸步步逼近。他能做到吗？有人能做到吗？花费: 200恢复时间：非常慢"
                        break;
                    case 46:
                        this.data_list = "金磁铁可以为你收集硬币和钻石。必须种在磁铁蘑菇上“我是怎么沦落至此的？”金磁铁问，“高级办公室、满满的福利、股票期权，这些都已经在望了，我就快成为中西部业务副总经理了。现在我却在这破草坪上，随时有被吃掉的风险。哦！有枚硬币！”花费: 50恢复时间：非常慢"
                        break;
                    case 47:
                        this.data_list = "荆棘石可以多次扎破轮胎，还能伤害踏在上面的僵尸。必须种在荆棘草荆棘石刚从欧洲旅游回来。他在那过得很愉快，也结识了些很棒的人，真的让他大开眼界。他从来不知道，他们建造了这么大的博物馆，还在里面收藏了这么多画作，这对他而言是个大惊喜花费: 125恢复时间：非常慢"
                        break;
                    case 48:
                        this.data_list = "点击玉米大炮来发射致命的玉米棒子。必须种在一对相邻的玉米投不管怎样，玉米大炮到底怎么了？他曾在哈佛大学深造，就职于纽约一家著名的律师事务所。他一发玉米就能炸掉整片僵尸。这些都众所周知。但在内心深处，他为什么要做这些花费: 50恢复时间：非常慢"
                        break;
                    case 49:
                        this.data_list = "模仿者可以让你在同一关卡内使用两份相同植物！“我还记得七六年的那次僵尸战争，”模仿者用沙哑苍老的声音说，“那时候，我们可没有这些花里胡哨的豌豆射手和火爆辣椒。我们只有勇气，勇气和勺子。”"
                        break;

                }


            }
        },
        created() {
            // 为给定 ID 的 user 创建请求
            axios.get('http://localhost:8080/plant/all')
                .then(({
                    data
                }) => {
                    console.log(data);
                    this.plants = data.data;
                    this.filterPlants = data.data;
                })
                .catch(function(error) {
                    console.log(error);
                });
        }
    })
</script>

</html>